import  React,{useState,Component} from 'react';
import { BrowserRouter as Router,Route,Routes,Link} from 'react-router-dom';
import Home from './home/home';
import User from './user/user';
import News from './news/news';
import Plan from './news/plan/plan';
import Crowdsourcing from './Crowdsourcing/Crowdsourcing';
import Sell from './sell/sell';
import Searching from './search/search';
import Concord from './user/content/Crowdsourcingrecords';
import Head from './user/content/head';
import Phistory from './user/content/Purchasehistory'
import Rmanagement from './user/content/Releasemanagement'
import './index.css'
import 'antd/dist/antd.css'
import { Input, Space,Button,Avatar,Badge,Affix} from 'antd';
import { UserOutlined,BellOutlined } from '@ant-design/icons';

const { Search } = Input;

function WebRouter(){
        const [count,setCount] = useState(0)
    return(
        <Router>
            <Affix offsetTop={1}>
            <div className='main'>
                <div className='index'>
                    <div className='home'><Link to="/home/">首页</Link></div>
                    <Space > 
                    <Search
                        placeholder="input search text"
                        allowClear
                        enterButton="Search"
                        size="large"
                    /> 
                    </Space>
                    <div className='block'></div>
                    <div className='block'></div>
                    <Button type='link' shape="circle" href="/user">
                    <Avatar size={40} icon={<UserOutlined />}/>
                    </Button>
                    <div className='block'></div>
                    <Button type='link' shape="circle" href="/news">
                    <Badge count={setCount}><Avatar size={40} icon={<BellOutlined />} /> </Badge>
                    </Button>
                    <div className='block'></div>
                    <div className='plan'><Link to="/news/plan/">进度</Link></div>
                    <div className='Crowdsourcing'><Link to="/Crowdsourcing/">加入众包</Link></div>
                    <div className='sell'><Link to="/sell/">成为卖家</Link></div>
                </div>
            </div>
            </Affix>
        <Routes>
        <Route index element={<Home />}/>
        <Route  path="/home" element={<Home />}/>
        <Route path="/user" element={<User/>}>
            {/* <Route index element={<Head />}/> */}
            <Route index element={<Phistory/>} ></Route>
            <Route path="/user/content/head" element={<Head/>}/>
            <Route path="/user/content/Purchasehistory" element={<Phistory/>} ></Route>
            <Route path="/user/content/Crowdsourcingrecords" element={<Concord/>}></Route>
            <Route path="/user/content/Releasemanagement" element={<Rmanagement/>}></Route>
        </Route>
        <Route path="/news" element={<News/>}/>
        <Route path="/news/plan" element={<Plan/>}/>
        <Route path="/Crowdsourcing" element={<Crowdsourcing/>}/>
        <Route path="/sell" element={<Sell/>}/>
        <Route path="/home/search" element={<Searching/>}/>
        <Route path="/goods/:id" element={<Searching/>}/>
        </Routes>
        </Router>
    )
}


export default WebRouter